<template>
	<view>
		<u-navbar :is-back="true" title=" " :back-icon-color="vk.getVuex('$app.config.color.navbar')" :background="{backgroundColor: vk.getVuex('$app.config.bg.navbar')}" :border-bottom="false">
			<view class="slot-wrap">
				<view class="u-flex u-row-between" style="width: 100%;">
					<view class="" style="white-space:nowrap;" :style="{color: vk.getVuex('$app.config.color.navbar')}">{{title}}</view>
					<view class="search u-flex u-row-left" @click="search" style="z-index: 1000;" :style="{color: vk.getVuex('$app.config.color.light'),background: vk.getVuex('$app.config.bg.search')}">
						<u-icon name="/static/search.png" size="28"></u-icon>
						<text class="u-p-l-15">请输入关键字搜索</text>
					</view>
				</view>
			</view>
		</u-navbar>
		<view class="" style="position: fixed;width: 100%;z-index: 9999;" :style="{top: navHeight+'rpx'}">
			<u-tabs 
			:duration="0" 
			:list="cateList" 
			:is-scroll="true" 
			height="60" 
			gutter="18" 
			:active-color="vk.getVuex('$app.config.color.sec')"
			:inactive-color="vk.getVuex('$app.config.color.main')"
			:bg-color="vk.getVuex('$app.config.bg.navbar')"
			bar-height="6" 
			bar-width="40" 
			:current="cateCurrent" 
			@change="cateClick"></u-tabs>
		</view>
		<view class="u-p-t-60"></view>
		<view class="">
			<view class="u-flex u-row-left u-flex-wrap u-p-l-20 u-p-t-20">
				<block v-for="(item, index) in trendsList" :key="index">
					<view class="tab" v-if="index != 0 && index % 8 === 0">
						<view class="" style="width: 710rpx;">
							<ad v-if="vk.getVuex('$setting.client.banner_id')" :unit-id="vk.getVuex('$setting.client.banner_id')" type="banner" ad-theme="black"></ad>
						</view>
					</view>
					<view class="tab" @click="detail(item._id,item.video)">
						<!-- <image lazy-load :src="item.video+'?x-oss-process=video/snapshot,t_1000,w_350,m_fast'" mode="aspectFill"></image> -->
						<muqian-lazyLoad width="347rpx" height="570rpx" :src="item.video+'?x-oss-process=video/snapshot,t_1000,w_350,m_fast'" :mode="item.dir===1?'aspectFit':'aspectFill'"></muqian-lazyLoad>
						<view class="texts u-p-l-10 u-p-r-10">
							<view class="">{{item.name}}</view>
							<!-- <view class="u-flex u-row-left u-p-t-10">
								<u-icon name="/static/video.png" size="40"></u-icon>
								<view class="u-p-l-10">{{item.view}}</view>
							</view> -->
						</view>
					</view>
				</block>
			</view>
		</view>
		
		<view class="" v-if="!noData">
			<u-loadmore :status="loadStatus" font-size="24" :margin-top="30" :margin-bottom="30" color="#B8B8B8"/>
		</view>
		<nodata v-else height="50vh"></nodata>
		
		<view class="safe-area-inset-bottom">
			<view class="" style="height: 1rpx;"></view>
		</view>
		
		<view @click="backTop" class="back backTop u-flex u-flex-col u-row-center u-col-center" :class="backShow?'backTop_show':'backTop_hide'">
			<image src="/static/backtop.png" style="width: 36rpx;height: 36rpx;"></image>
			<view class="text">顶部</view>
		</view>
		<view @click="search" class="back backSearch u-flex u-flex-col u-row-center u-col-center" :class="backShow?'backTop_show':'backTop_hide'">
			<image src="/static/search_t.png" style="width: 30rpx;height: 30rpx;"></image>
			<view class="text">搜索</view>
		</view>
	</view>
</template>

<script>
	let systemInfo = uni.getSystemInfoSync()
	// px转换到rpx的比例
	let pxToRpxScale = 750 / systemInfo.windowWidth;
	// 状态栏的高度
	let ktxStatusHeight = systemInfo.statusBarHeight * pxToRpxScale
	// 导航栏的高度
	let navigationHeight = 44 * pxToRpxScale
	// 总高度
	let navHeight = ktxStatusHeight + navigationHeight
	export default {
		data() {
			return {
				navHeight: navHeight,
				background: {
					backgroundColor: '#1F1F1F',
				},
				cateCurrent: 0,
				cateList: [{_id: 'new', name: '最新'},{_id: 'hot', name: '热门'}],
				noData: false,
				title: '',
				
				trendsList: [],
				pageIndex: 0,
				loadStatus: 'loading',
				// 滚动的位置
				backShow: false,
			}
		},
		async onLoad() {
			var that = this
			that.title = '视频'
			that.cateList = that.cateList.concat(await that.getCategory())
			await that.getList()
		},
		methods: {
			detail(id, src){
				uni.navigateTo({
					url: '/pages/trends/detail?id='+id+'&src='+src
				})
			},
			cateClick(e){
				var that = this
				that.noData = false
				that.cateCurrent = e
				that.getList(1)
			},
			async getList(on){
				let that = this;
				
				// 点击切换菜单 回复初始状态
				if(on == 1){
					that.trendsList = []
					that.pageIndex = 0
				}
				that.pageIndex = that.pageIndex + 1
				that.loadStatus = 'loading'
				
				var whereJson = {mode: 2, status: 1}
				var sortArr = [{name: '_add_time', type: 'desc'}]
				if(that.cateList[that.cateCurrent]._id === 'new') var sss;
				else if(that.cateList[that.cateCurrent]._id === 'hot') sortArr = [{name: 'view', type: 'desc'}]
				else whereJson.category_id = that.cateList[that.cateCurrent]._id
				let data = await that.vk.callFunction({
					url: 'client/wechat/list/pub/getList',
					data:{
						dbName: 'bus-wx-cover',
						pageIndex: that.pageIndex,
						pageSize: 30,
						whereJson,
						sortArr,
					}
				});
				that.trendsList = that.trendsList.concat(data.rows)
				if(data.hasMore) that.loadStatus = 'loadmore'
				else that.loadStatus = 'nomore'
				if(data.total == 0) that.noData = true
				else that.noData = false
			},
			async getCategory(){
				let that = this;
				let data = await that.vk.callFunction({
					url: 'client/wechat/list/pub/getList',
					data:{
						dbName: 'bus-wx-category',
						pageIndex: 1,
						pageSize: 500,
						whereJson: {
							mode: 2,
							status: 1
						},
						sortArr: [{name: '_add_time', type: 'asc'}],
					}
				});
				return data.rows
			},
			search(){
				uni.navigateTo({
					url: '/pages/about/search'
				})
			},
			backTop(){
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
			},
		},
		onShareAppMessage(res) {
			return {
				title: '这里有超多好看的壁纸免费下载~',
				imageUrl: this.vk.getVuex('$setting.base.image'),
				path: 'pages/index/index?inviteId='+(this.vk.getVuex('$user.userInfo._id')?this.vk.getVuex('$user.userInfo._id'):'')
			}
		},
		onPageScroll(e) {
			if(e.scrollTop > 1000){
				this.backShow = true
			}else{
				this.backShow = false
			}
		},
		async onReachBottom(){
			let that = this;
			if(that.loadStatus == 'nomore') return
			await that.getList()
		},
	}
</script>
<style lang="scss" scoped>
	.slot-wrap {
		display: flex;
		align-items: center;
		flex: 1;
		padding: 0 30rpx 0 0;
	}
	.search{
		background: #282828;
		height: 58rpx;
		margin-left: 25rpx;
		padding-left: 30rpx;
		border-radius: 50px;
		width: 100%;
		text{
			color: #808080;
			font-size: 13px;
		}
	}
	.menu{
		position: fixed;
		left: 0;
		width: calc(100% - 60rpx);
		z-index: 99;
		background-color: #FFFFFF;
	}
	.menus{
		position: fixed;
		left: 0;
		z-index: 99;
		background-color: #FFFFFF;
	}
	.tags{
		font-size: 14px;
		background-color: #F5F6F8;
		color: #909399;
		border-radius: 40rpx;
		margin-right: 20rpx;
		line-height: 60rpx;
		padding: 0 40rpx;
		white-space:nowrap;
	}
	.tag-active{
		background-image: linear-gradient(100deg, #fcfc44 , #f8c93c);
		color: #333333;
		box-shadow: 0px 0px 10px #fff8ab;
		animation: tiaobig 0.8s ease-in-out alternate infinite;
		animation-iteration-count:1;
	}
	@keyframes tiaobig {
		0% {
			transform: scale(0.98);
		}
		25% {
			transform: scale(1.08);
		}
		50% {
			transform: scale(0.94);
		}
		75% {
			transform: scale(1.06);
		}
		100% {
			transform: scale(1);
		}
	}
	
	.tab{
		position: relative;
		margin-right: 18rpx;
		margin-bottom: 18rpx;
		border-radius: 12rpx;
		image{
			border-radius: 12rpx;
			width: 347rpx;
			height: 570rpx;
		}
		.array{
			position: absolute;
			top: 18rpx;
			right: 0rpx;
			color: #F8DE52;
			background-color: rgba(0, 0, 0, 0.4);
			padding: 0rpx 12rpx 0 16rpx;
			border-radius: 20rpx 0 0 20rpx;
			font-size: 12px;
		}
		.texts{
			color: #FFFFFF;
			position: absolute;
			bottom: 20rpx;
		}
	}
	.back{
		position: fixed;
		right: -80rpx;
		width: 80rpx;
		height: 80rpx;
		border-radius: 80rpx;
		padding: 8rpx;
		box-shadow: 0 0px 16px rgba(0, 0, 0, 0.2);
		transition-property: right;
		transition-duration: 0.6s;
		.text{
			font-size: 12px;
		}
	}
	.backSearch{
		bottom: 200rpx;
		background-color: #efb336;
		.text{
			color: #FFFFFF;
		}
	}
	.backTop{
		bottom: 100rpx;
		background-color: #FFFFFF;
		.text{
			color: #efb336;
		}
	}
	.backTop_show{
		right: 20rpx!important;
	}
	.backTop_hide{
		right: -80rpx!important;
	}
</style>